<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        #box {
            border: 2px solid red;
            width: 450px;
            height: 70px;
            padding-top: 400px;
            background:url(images/1.png) no-repeat;
        }
        ul {
            list-style: none;
        }
        li {
            display: inline-block;
            width: 40px;
            height: 40px;
            padding-left: 20px;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="item"><img src="images/1.png" width="100%"></li>
            <li class="item"><img src="images/2.png" width="100%"></li>
            <li class="item"><img src="images/3.png" width="100%"></li>
            <li class="item"><img src="images/5.png" width="100%"></li>
            <li class="item"><img src="images/4.png" width="100%"></li>
        </ul>
    </div>
    <script>
        // var item1=document.getElementById('item1');
        // var item2=document.getElementById('item2');
        // var item3=document.getElementById('item3');
        // var item4=document.getElementById('item4');
        // var item5=document.getElementById('item5');
        // var oBox=document.getElementById('box');
        function $(id){
            return typeof id==='string'?document.getElementById(id):null;
        }
        // item1.onmouseover=function(){
        //     oBox.style.background='url(images/1.png) no-repeat'
        // }
        // item2.onmouseover=function(){
        //     oBox.style.background='url(images/2.png) no-repeat'
        // }
        // item3.onmouseover=function(){
        //     oBox.style.background='url(images/3.png) no-repeat'
        // }
        // item4.onmouseover=function(){
        //     oBox.style.background='url(images/4.png) no-repeat'
        // }
        // item5.onmouseover=function(){
        //     oBox.style.background='url(images/5.png) no-repeat'
        // }
        function changebgcImg(liId,imgSrc){
                 $(liId).onmouseover=function(){
                $('box').style.background=imgSrc;
            }
        }
        // changebgcImg('item1','url(images/1.png) no-repeat');
        // changebgcImg('item2','url(images/2.png) no-repeat');
        // changebgcImg('item3','url(images/3.png) no-repeat');
        // changebgcImg('item4','url(images/4.png) no-repeat');
        // changebgcImg('item5','url(images/5.png) no-repeat');
    </script>
</body>
</html>